<template>
  <div class="more-comments">
    <headerNav title="全部评论"/>
    <comment 
      v-for="(item,index) in comments" 
      :key="index"
      @reply="replyObj" 
      :comment="item" />

    <postDetailFooter
      :item="post"
      :replyItem="reply"
      @newComment="getComments"
    />
  </div>
</template>

<script>
import headerNav from '../components/headerNav';
import comment from "../components/comment";
import postDetailFooter from '../components/postDetailFooter';

export default {
  components: {headerNav,comment,postDetailFooter},
  data() {
    return {
      postId: this.$route.params.id,
      comments: [],
      post: [],
      reply: {},      //点击回复传过来的参数

    }
  },
  async mounted() {
    let axiosList = [
      this.$api.getNewsDetail(this.postId),
      this.$api.getPostComment(this.postId)
    ];

    //axios 并发请求
    this.$axios.all(axiosList).then(
      this.$axios.spread((res1, res2) => {
        this.post = res1.data;
        this.comments = res2.data.data;
      })
    );
  },
  methods: {
    //接受点击回复时返回的 parent_id 和 回复的用户名
    replyObj(val) {
      this.reply = val;
    },
    //获取评论数据
    async getComments() {
      const res = await this.$api.getPostComment(this.postId)
      this.comments = res.data.data;
    }
  },
}
</script>

<style lang="less" scoped>
  .more-comments{
    padding-bottom: 22.222vw;
  }
</style>